{include file="public/header" /}



<div class="page">
    <div class="fixed-bar">
        <div class="item-title">
            <div class="subject">
                <h3>运单模板</h3>
                <h5></h5>
            </div>
            {include file="public/admin_items" /}
        </div>
    </div>

    
    <div class="explanation" id="explanation">
        <div class="title" id="checkZoom">
            <h4 title="{$Think.lang.ds_explanation_tip}">{$Think.lang.ds_explanation}</h4>
            <span id="explanationZoom" title="{$Think.lang.ds_explanation_close}" class="arrow"></span>
        </div>
        <ul>
            <li>勾选需要打印的项目，勾选后可以用鼠标拖动确定项目的位置、宽度和高度，也可以点击项目后边的微调按钮手工录入</li>
            <li>设置完成后点击提交按钮完成设计</li>
        </ul>
    </div>
    
    
    <table class="ds-default-table">
        <tbody>
        <tr>
            <td class="required">选择打印项:</td>
        </tr>
        <tr class="noborder">
            <td class="vatop rowform">
                <form id="design_form" action="{:url('Waybill/waybill_design_save')}" 
                      method="post">
                    <input type="hidden" name="waybill_id" value="{$waybill_info.waybill_id}">
                    <ul id="waybill_item_list" class="waybill-item-list">
                        {notempty name="waybill_item_list"}
                        {foreach name="waybill_item_list" item="value"}
                        <li>
                            <input id="check_{$key}" class="check" type="checkbox" name="waybill_data[{$key}][check]" data-waybill-name="{$key}" data-waybill-text="{$value.item_text}" {$value.check}>
                            <label for="check_{$key}" class="label">{$value.item_text}</label>
                            <i dstype="btn_item_edit" data-item-name="{$key}" title="微调" class="iconfont">&#xe731;</i>
                            <input id="left_{$key}" type="hidden" name="waybill_data[{$key}][left]" value="{$value.left}">
                            <input id="top_{$key}" type="hidden" name="waybill_data[{$key}][top]" value="{$value.top}">
                            <input id="width_{$key}" type="hidden" name="waybill_data[{$key}][width]" value="{$value.width}">
                            <input id="height_{$key}" type="hidden" name="waybill_data[{$key}][height]" value="{$value.height}">
                        </li>
                       {/foreach}
                       {/notempty}
                    </ul>
                </form>
            </td>
        </tr>
        <tr>
            <td class="required">打印项偏移校正：</td>
        </tr>
        <tr class="noborder">
            <td>
                <div class="waybill_area" style="position: relative; width: 870.2px; height: 478.8px;">
                    <div class="waybill_back">
                        <img src="{present name="waybill_info.waybill_image_url"}{$waybill_info.waybill_image_url}{/present}" alt=""></div>
                    <div class="waybill_design">
                        {notempty name="waybill_info_data"}
                        {foreach name="waybill_info_data" item="waybill_data"}
                        {present name="waybill_data.check"}
                        <div id="div_{$key}" data-item-name="{$key}" class="waybill_item"
                             style="position: absolute;width:{$waybill_data.width}px;height:{$waybill_data.height}px;left:{$waybill_data.left}px;top:{$waybill_data.top}px;">{$waybill_data.item_text}</div>
                        {/present}
                        {/foreach}
                       {/notempty}
                    </div>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div id="dialog_item_edit" style="display:none;">
    <input id="dialog_item_name" type="hidden">
    <dl>
        <dt>左偏移量：</dt>
        <dd>
            <input id="dialog_left" type="text" value="">
        </dd>
    </dl>
    <dl>
        <dt>上偏移量：</dt>
        <dd>
            <input id="dialog_top" type="text" value="">
        </dd>
    </dl>
    <dl>
        <dt>宽：</dt>
        <dd>
            <input id="dialog_width" type="text" value="">
        </dd>
    </dl>
    <dl>
        <dt>高：</dt>
        <dd>
            <input id="dialog_height" type="text" value="">
        </dd>
    </dl>
    <a id="btn_dialog_submit" href="javascript:;">确认</a>
    <a id="btn_dialog_cancel" href="javascript:;">取消</a>
</div>
<a id="submit" href="javascript:void(0)" class="btn"><span>{$Think.lang.ds_submit}</span></a>

</div>

<style>
    .waybill-item-list {}
    .waybill-item-list li { width: 20%; margin: 0 0 10px 0;}
    .waybill-item-list .check,
    .waybill-item-list .label,
    .waybill-item-list i { vertical-align: middle; display: inline-block; *display: inline; *zoom: 1;}
    .waybill-item-list i { font-size: 14px; margin-left: 4px; color: #999;}

    .waybill_area { position: relative; width:{$waybill_info.waybill_pixel_width}px; height: {$waybill_info.waybill_pixel_height}px; }
    .waybill_back { position: relative; width: {$waybill_info.waybill_pixel_width}px; height: {$waybill_info.waybill_pixel_height}px; }
    .waybill_back img { width: {$waybill_info.waybill_pixel_width}px; height: {$waybill_info.waybill_pixel_height}px; }
    .waybill_design { position: absolute; left: 0; top: 0; width: {$waybill_info.waybill_pixel_width}px; height: {$waybill_info.waybill_pixel_height}px; }
    .waybill_item { background-color: #FEF5E6; position: absolute; left: 0; top: 0; width: 90px; height: 20px; padding: 1px 5px 4px 5px; border-color: #FFBEBC; border-style: solid; border-width: 1px 1px 1px 1px; cursor: move;}
    .waybill_item:hover { padding: 1px 5px 1px 5px; border-color: #FF7A73; border-width: 1px 1px 4px 1px;}
</style>

<script type="text/javascript">
    $(document).ready(function() {
        var draggable_event = {
            stop: function(event, ui) {
                var item_name = ui.helper.attr('data-item-name');
                var position = ui.helper.position();
                $('#left_' + item_name).val(position.left);
                $('#top_' + item_name).val(position.top);
            }
        };

        var resizeable_event = {
            stop: function(event, ui) {
                var item_name = ui.helper.attr('data-item-name');
                $('#width_' + item_name).val(ui.size.width);
                $('#height_' + item_name).val(ui.size.height);
            }
        };

        $('.waybill_item').draggable(draggable_event);
        $('.waybill_item').resizable(resizeable_event);

        $('#waybill_item_list input:checkbox').on('click', function() {
            var item_name = $(this).attr('data-waybill-name');
            var div_name = 'div_' + item_name;
            if($(this).prop('checked')) {
                var item_text = $(this).attr('data-waybill-text');
                var waybill_item = '<div id="' + div_name + '" data-item-name="' + item_name + '" class="waybill_item">' + item_text + '</div>';
                $('.waybill_design').append(waybill_item);
                $('#' + div_name).draggable(draggable_event);
                $('#' + div_name).resizable(resizeable_event);
                $('#left_' + item_name).val('0');
                $('#top_' + item_name).val('0');
                $('#width_' + item_name).val('100');
                $('#height_' + item_name).val('20');
            } else {
                $('#' + div_name).remove();
            }
        });

        $('.waybill_design').on('click', '.waybill_item', function() {
            console.log($(this).position());
        });

        //微调弹出窗口
        $('[dstype="btn_item_edit"]').on('click', function() {
            var item_name = $(this).attr('data-item-name');
            $('#dialog_item_name').val(item_name);
            $('#dialog_left').val($('#left_' + item_name).val());
            $('#dialog_top').val($('#top_' + item_name).val());
            $('#dialog_width').val($('#width_' + item_name).val());
            $('#dialog_height').val($('#height_' + item_name).val());
            $('#dialog_item_edit').ds_show_dialog({title:'微调'});
        });

        //微调保存
        $('#btn_dialog_submit').on('click', function() {
            var item_name = $('#dialog_item_name').val();
            $('#div_' + item_name).css('left', $('#dialog_left').val() + 'px');
            $('#div_' + item_name).css('top', $('#dialog_top').val() + 'px');
            $('#div_' + item_name).css('width', $('#dialog_width').val() + 'px');
            $('#div_' + item_name).css('height', $('#dialog_height').val() + 'px');
            $('#left_' + item_name).val($('#dialog_left').val());
            $('#top_' + item_name).val($('#dialog_top').val());
            $('#width_' + item_name).val($('#dialog_width').val());
            $('#height_' + item_name).val($('#dialog_height').val());
            $('#dialog_item_edit').hide();
        });

        //微调取消
        $('#btn_dialog_cancel').on('click', function() {
            $('#dialog_item_edit').hide();
        });

        $('#submit').on('click', function() {
            $('#design_form').submit();
        });
    });
</script>